<script>

import { DArrowLeft, Close } from '@element-plus/icons'

export default {
  data: function () {
    return {
      data: new Array(20).fill([]).map(() => new Array(20).fill(0)),
      next: 1,
      lastMovement: null
    }
  },
  methods: {
    toogleCell: function (row, col) {
      if (!this.data[row][col]) {
        this.data[row][col] = this.next;
        this.next = this.next === 1 ? 2 : 1;
        this.lastMovement = [row, col];

        if (this.checkWin(row, col)) {
          window.alert('Winner is : ' + (this.next === 1 ? 'White': 'Black'));
          this.clear();
        }
      }
    },
    clear: function () {
      this.data = new Array(20).fill([]).map(() => new Array(20).fill(0));
      this.next = 1;
    },
    back: function () {
      if (this.lastMovement) {
        this.data[this.lastMovement[0]][this.lastMovement[1]] = 0;
        this.next = this.next === 1 ? 2 : 1;
        this.lastMovement = null
      }
    },
    checkWin (row, col) {
      // check left to right
      return this.checkLinked(row, col - 4, 'L') ||
        this.checkLinked(row, col - 3, 'L') ||
        this.checkLinked(row, col - 2, 'L') ||
        this.checkLinked(row, col - 1, 'L') ||
        this.checkLinked(row, col, 'L') ||
      // check up to bottom
        this.checkLinked(row - 4, col, 'U') ||
        this.checkLinked(row - 3, col, 'U') ||
        this.checkLinked(row - 2, col, 'U') ||
        this.checkLinked(row - 1, col, 'U') ||
        this.checkLinked(row, col, 'U') ||
      // up-right to left-bottom
        this.checkLinked(row - 4, col - 4, 'LU') ||
        this.checkLinked(row - 3, col - 3, 'LU') ||
        this.checkLinked(row - 2, col - 2, 'LU') ||
        this.checkLinked(row - 1, col - 1, 'LU') ||
        this.checkLinked(row, col, 'LU') ||
      // up-left to right-bottom
        this.checkLinked(row - 4, col + 4, 'RU') ||
        this.checkLinked(row - 3, col + 3, 'RU') ||
        this.checkLinked(row - 2, col + 2, 'RU') ||
        this.checkLinked(row - 1, col + 1, 'RU') ||
        this.checkLinked(row, col, 'RU')
    },
    checkLinked (row, col, startPoint) {
      var ref = this.data[row][col];

      if (!ref) {
        return false;
      }

      if (startPoint === 'L') {
        if (col + 4 < 20) {
          return ref === this.data[row][col + 1] &&
            ref === this.data[row][col + 2] &&
            ref === this.data[row][col + 3] &&
            ref === this.data[row][col + 4]
        }
      } else if (startPoint === 'U') {
        if (row + 4 < 20) {
          return ref === this.data[row + 1][col] &&
            ref === this.data[row + 2][col] &&
            ref === this.data[row + 3][col] &&
            ref === this.data[row + 4][col]
        }
      } else if (startPoint === 'LU') {
        if (row + 4 < 20 && col + 4 < 20) {
          return ref === this.data[row + 1][col + 1] &&
            ref === this.data[row + 2][col + 2] &&
            ref === this.data[row + 3][col + 3] &&
            ref === this.data[row + 4][col + 4]
        }
      } else if (startPoint === 'RU') {
        if (row + 4 < 20 && col > 4) {
          return ref === this.data[row + 1][col - 1] &&
            ref === this.data[row + 2][col - 2] &&
            ref === this.data[row + 3][col - 3] &&
            ref === this.data[row + 4][col - 4]
        }
      }

      return false;
    }
  },
  components: {
    DArrowLeft,
    Close 
  }
}
</script>

<template>
  <h1>Five-in-a-Row</h1>
  <div class="board">
    <span v-for="(row, rowOffset) in data" >
      <div
        v-for="(col, colOffset) in row"
        :class="['cell', col === 1 && 'black', col === 2 && 'white']"
        @click="toogleCell(rowOffset, colOffset)"
      >
      </div>
    </span>
  </div>
  <el-row class="align-left">
    <el-col :span="2" :offset="9" class="line">
      <el-button @click="back()" :disabled="!this.lastMovement" type="danger">
        <el-icon class="align-middle"><DArrowLeft /></el-icon>
        &nbsp;&nbsp;Back
      </el-button>
    </el-col>
    <el-col :span="2" class="line">
      <el-button @click="clear()" type="danger">
        <el-icon class="align-middle"><Close /></el-icon>
        &nbsp;&nbsp;Clear
      </el-button>
    </el-col>
    <el-col :span="2" class="line">
      Next: <div :class="['cell-ref', 'align-sub', this.next === 2 ? 'white' : 'black']">
      </div>
    </el-col>
  </el-row>
</template>

<style scoped>
  .board {
    margin: 20px auto;
    width: 400px;
    height: 400px;
    background-color: #AAAAAA;
  }
  .cell {
    float: left;
    margin: 0px -1px -1px 0px;
    width: 19px;
    height: 19px;
    border: 1px solid #CCCCCC;
  }
  .cell-ref {
    margin: 0px;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #CCCCCC;
  }
  .black {
    background-color: #000000;
  }
  .white {
    background-color: #FFFFFF;
  }
  .line {
    padding: 10px;
    line-height: 42px;
  }
  .align-left {
    text-align: left;
  }
  .align-sub {
    vertical-align: sub;
  }
  .align-middle {
    vertical-align: middle;
  }
</style>
